<template>
  <div>
    <div v-if="jurisdiction>10">
    <el-button type="primary" class="but" @click="dialogFormVisible = true"
      >添加</el-button
    >
    <el-table :data="userList" stripe style="width: 100%" border>
      <el-table-column label="序号" type="index" width="180" align="center">
      </el-table-column>
      <el-table-column
        prop="username"
        label="账号"
        width="width"
        align="center"
      >
      </el-table-column>
      <el-table-column
        prop="password"
        label="密码"
        width="width"
        align="center"
      >
      </el-table-column>
      <el-table-column
        prop="jurisdiction"
        label="权限"
        width="width"
        align="center"
      >
      </el-table-column>
      <el-table-column
        prop="user_name"
        label="用户名"
        width="width"
        align="center"
      >
      </el-table-column>
      <el-table-column prop="" label="头像" width="width" align="center">
        <template slot-scope="{ row, $index }">
          <img :src="row.user_url" alt="" style="width: 80px; height: 60px" />
        </template>
      </el-table-column>
      <el-table-column prop="" label="操作" width="width" align="center">
        <template slot-scope="{ row, $index }">
          <el-button
            type="primary"
            icon="el-icon-refresh"
            @click="getuserlist(row)"
            >修改</el-button
          >
          <el-popconfirm
            :title="`您确定要删除${row.user_name}用户吗?`"
            @onConfirm="deluserlist(row.id)"
          >
            <el-button
              style="margin-left: 10px"
              slot="reference"
              type="danger"
              icon="el-icon-delete"
              >删除</el-button
            >
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <!-- 添加弹窗 -->
    <el-dialog
      title="添加栏目名称"
      :visible.sync="dialogFormVisible"
      close-on-press-escape
    >
      <el-form :model="form">
        <el-form-item label="用户名称" :label-width="formLabelWidth">
          <el-input v-model="form.username" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="用户密码" :label-width="formLabelWidth">
          <el-input v-model="form.password" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="adduserlist">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 修改弹窗 -->
    <el-dialog
      title="修改栏目名称"
      :visible.sync="dialogFormVisibles"
      close-on-press-escape
    >
      <el-form :model="forms">
        <el-form-item label="用户账号" :label-width="formLabelWidth">
          <el-input v-model="forms.username" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="用户密码" :label-width="formLabelWidth">
          <el-input v-model="forms.password" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="用户名称" :label-width="formLabelWidth">
          <el-input v-model="forms.user_name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="个性签名" :label-width="formLabelWidth">
          <el-input v-model="forms.user_title" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="用户头像" :label-width="formLabelWidth">
          <el-input v-model="forms.user_url" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="用户权限" :label-width="formLabelWidth">
          <el-input v-model="forms.jurisdiction" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisibles = false">取 消</el-button>
        <el-button type="primary" @click="alteruserlist">确 定</el-button>
      </div>
    </el-dialog>
    </div>
    <div v-else class="showHidden">对不起，您当前权限值无法查看此模块</div>
</div>
</template>


<script>
export default {
  name: "Setting",
  data() {
    return {
      dialogFormVisible: false,
      dialogFormVisibles: false,
      form: {
        username: "",
        password: "",
      },
      forms: {
        id: "",
        jurisdiction: "",
        password: "",
        user_name: "",
        user_title: "",
        user_url: "",
        username: "",
      },
      username: "",
      password: "",
      id: "",
      jurisdiction: "",
      formLabelWidth: "120px",
      userList: [],
      jurisdiction:''
    };
  },
  mounted() {
    this.getuser();
    this.jurisdiction = localStorage.getItem('jurisdiction')
  },
  methods: {
    //获取
    async getuser() {
      let result = await this.$API.userList.getuser();
      console.log(result);
      this.userList = result.data;
    },
    //删除
    async deluserlist(id) {
      await this.$API.userList.deleteuser(id);
      this.getuser();
    },
    //添加
    async adduserlist() {
      this.dialogFormVisible = false;
      let { username, password } = this.form;
      await this.$API.userList.adduser(username, password);
      this.form.username=''
      this.form.password=''
      this.getuser();
    },
    //修改
    getuserlist(row) {
      let {
        id,
        jurisdiction,
        password,
        user_name,
        user_title,
        user_url,
        username,
      } = row;
      this.forms.id = id;
      this.forms.jurisdiction = jurisdiction;
      this.forms.password = password;
      this.forms.user_name = user_name;
      this.forms.user_title = user_title;
      this.forms.user_url = user_url;
      this.forms.username = username;
      this.dialogFormVisibles = true;
    },
    async alteruserlist() {
      this.dialogFormVisibles = false;
      let {
        id,
        jurisdiction,
        password,
        user_name,
        user_title,
        user_url,
        username,
      } = this.forms;
      await this.$API.userList.alteruser(
       id,
        jurisdiction,
        password,
        user_name,
        user_title,
        user_url,
       username,
        //  this.forms
      );
      this.getuser();
    },
  },
};
</script>

<style  scoped>
.but {
  margin: 10px;
}
.showHidden{
  text-align:center;
  font-size:25px;
  margin-top: 100px;
  color:red;
}
</style>